<template>
  <div class="container">
    <div class="head">
      <NavHead>
        <template v-slot:iconfont-left>
          <i class="iconfont icon-arrowLeft arrow" @click="$router.back()"></i>
        </template>
        <template v-slot:title>
          <p class="names">购物车</p>
        </template>
        <template v-slot:iconfont-right>
          <i class="iconfont icon-shanchu point"></i>
        </template>
      </NavHead>
    </div>

    <div class="list">
      <div class="product">
        <div class="circle"></div>
        <div class="pic">
          <img src="../../assets/image/01.jpg" alt="" />
        </div>
        <div class="desc">
          <p>雅阁沙发</p>
          <p>¥1299</p>
          <div class="num"><span>-</span><span>4</span><span>+</span></div>
        </div>
      </div>
      <div class="product">
        <div class="circle"></div>
        <div class="pic">
          <img src="../../assets/image/01.jpg" alt="" />
        </div>
        <div class="desc">
          <p>雅阁沙发</p>
          <p>¥1299</p>
          <div class="num"><span>-</span><span>4</span><span>+</span></div>
        </div>
      </div>
    </div>
    <div class="box">
      <div class="left">
        <div class="circle1"></div>   
        <!-- <span>全选</span> -->
        <p>全选</p>
      </div>
      <div class="center">
          <p class="sum">合计  :  ¥0</p>
          <p class="des">已优惠 : ¥0</p>
      </div>
      <div class="right" @click="jumpConfirm">
          <p class="res">结算 (0)</p>
      </div>
    </div>
  </div>
</template>

<script>
import NavHead from "../../components/NavHead";
export default {
  name: "ShopCar",
  components: {
    NavHead,
  },
  methods:{
      jumpConfirm(){
          this.$router.push({name:"ConfirmOrder"})
      }
  }
};
</script>

<style scoped>
.container{
  width: 100%;
  background: #f1f1f1;
}
.arrow {
  color: #fff;
  margin-top: 0.3rem;
}
.point {
  color: #fff;
  font-size: 0.5rem;
}
.names {
  color: #fff;
  font-size: 0.4rem;
}
.head {
  position: fixed;
  top: 0;
  margin-bottom: 1.4rem;
}
.list {
  margin-top: 1.4rem;
  margin-left: 0;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
.product {
  background-color: white;
  height: 2rem;
  width: 95%;
  margin: 0.2rem auto;
  display: flex;
  box-sizing: border-box;
}
.circle {
  width: 0.2rem;
  height: 0.2rem;
  border: 2px solid rgb(59, 57, 57);
  border-radius: 50%;
  margin: 0.7rem 0.2rem;
}
.pic img {
  height: 1.5rem;
  width: 2rem;
  margin-top: 0.25rem;
  flex: 3;
}
.desc {
  position: relative;
  margin-top: 0.45rem;
  flex: 6.5;
}
.desc p {
  text-align: left;
  margin-left: 0.2rem;
}

.num {
  position: absolute;
  right: 0;
  bottom: 0.8rem;
}
.num span {
  padding: 0 0.1rem;
}
.box {
  width: 100%;
  height: 1.3rem;
  position: fixed;
  bottom: 0;
  /* background-color: coral; */
  display: flex;
}
.left{
    flex:1;
    display: flex;
    align-items: center;
    /* background-color: cornflowerblue; */
}
.center{
    flex: 2;
}
.right{
    flex: 1;
    display: flex;
    align-items: center;
    background-color: #FF6347;
}
.right .res{
    font-size: 0.32rem;
    color:#fff;
    margin-left: 0.4rem;
}
.left .circle1 {
  width: 0.2rem;
  height: 0.2rem;
  border: 2px solid rgb(59, 57, 57);
  border-radius: 50%;
  margin: 0.5rem 0.2rem;
}
.center p{
    text-align: right;
}
.center .sum{
    margin-top: 0.25rem;
    font-size: 0.28rem;
    letter-spacing:.02rem;
    margin-right: 0.1rem;
}
.center .des{
    font-size: 0.24rem;
    color: #FF6347;
    margin-right: 0.1rem;

}

</style>